<template>
  <el-scrollbar height="100%">
    <div class="w movie">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-image :src="BASE_URL + tableData.poster"
                    style="width: 180px;height: auto;"
                    alt="Film poster"/>
        </el-col>
        <el-col :span="6">
          <div style="margin-left: 20px;">
            <p style="font-size: 20px;font-weight: bold">{{ tableData.filmName }}</p>
            <p style="font-size: 14px;"> ({{ tableData.englishName }})</p>
            <p>{{ tableData.directorName }}</p>
            <p>{{ tagFormatter(tableData, null, tableData.tag) }}</p>
            <p>{{ nationalityFormatter(tableData, null, tableData.region) }} / {{ tableData.duration }}分钟</p>
            <p>{{ tableData.releaseDate }} 上映 </p>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <p style="color: #ebbe56;margin-top: 130px;">电影评分 : {{ tableData.filmRating }}分</p>
            <el-button
                @click="watchMovie"
                class="btn">
              <el-icon class="el-icon-video-play">
                <VideoPlay/>
              </el-icon>
              观看视频
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="w movie-details">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="介绍" name="first">
              <div>
                <div style="overflow: hidden">
                  <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                  <div style="float: left;margin-left: 10px">
                    <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">剧情简介</span>
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <p style="line-height: 1.5;text-indent: 2em;">{{ tableData.synopsis }}</p>
                </div>
              </div>
              <div style="overflow: hidden">
                <div style="overflow: hidden">
                  <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                  <div style="float: left;margin-left: 10px">
                    <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">导演简介</span>
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <div style="text-align: center;float: left;width: 120px ">
                    <el-image :src="BASE_URL + tableData.directorPoster"
                              style="width: 120px;height: auto;"
                              alt="Film poster"/>
                    <p>{{ tableData.directorName }} {{
                        nationalityFormatter(tableData, null, tableData.nationality)
                      }}</p>
                  </div>
                  <div style="margin-left: 30px;float: left;width: 630px;">
                    <p style="line-height: 1.5;text-indent: 2em;">{{ tableData.directorIntro }}</p>
                  </div>
                </div>
              </div>

              <div style="overflow: hidden">
                <div style="overflow: hidden">
                  <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                  <div style="float: left;margin-left: 10px">
                    <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">演员信息</span>
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <el-row :gutter="10">
                    <el-col :span="6" v-for="item in actorData">
                      <div style="text-align: center;float: left;width: 120px ">
                        <el-image :src="BASE_URL + item.poster"
                                  style="width: 120px;height: auto;margin: 0 auto;"
                                  alt="Film poster"/>
                        <p>{{ item.actorName }} </p>
                        <p style="font-size: 12px;">{{ item.participation }}:{{ item.role }}</p>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="导演信息" name="second">
              <div style="overflow: hidden">
                <div style="overflow: hidden">
                  <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                  <div style="float: left;margin-left: 10px">
                    <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">导演简介</span>
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <div style="text-align: center;float: left;width: 120px ">
                    <el-image :src="BASE_URL + tableData.directorPoster"
                              style="width: 120px;height: auto;"
                              alt="Film poster"/>
                    <p>{{ tableData.directorName }} {{
                        nationalityFormatter(tableData, null, tableData.nationality)
                      }}</p>
                  </div>
                  <div style="margin-left: 30px;float: left;width: 630px;">
                    <p style="line-height: 1.5;text-indent: 2em;">{{ tableData.directorIntro }}</p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="演员信息" name="third">
              <div style="overflow: hidden">
                <div style="overflow: hidden">
                  <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                  <div style="float: left;margin-left: 10px">
                    <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">演员信息</span>
                  </div>
                </div>
                <div style="margin-top: 20px;">
                  <el-row :gutter="10">
                    <el-col :span="6" v-for="item in actorData">
                      <div style="text-align: center;float: left;width: 120px ">
                        <el-image :src="BASE_URL + item.poster"
                                  style="width: 120px;height: auto;margin: 0 auto;"
                                  alt="Film poster"/>
                        <p>{{ item.actorName }} </p>
                        <p style="font-size: 12px;">{{ item.participation }}:{{ item.role }}</p>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="8">
          <div style="overflow: hidden;margin-top: 50px">
            <div style="overflow: hidden">
              <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
              <div style="float: left;margin-left: 10px">
                <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">预告片</span>
              </div>
            </div>
          </div>
          <div style="margin-top: 20px;">
            <el-row :gutter="10">
              <el-col :span="24" style="margin-top: 10px;"
                      v-for="item in previewData">
                <el-row :gutter="10">
                  <el-col :span="14">
                    <el-image :src="BASE_URL + item.thumbnail"
                              style="width: 200px;height: 115px;"
                              @click="lookPreview(item.id,item.filmId)"
                              alt="Film poster"/>
                  </el-col>
                  <el-col :span="10">
                    <div style="	overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;
	                              	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;"
                         @click="lookPreview(item.id,item.filmId)"
                         :title=" item.title">
                      <p style="font-weight: bold;line-height: 115px;margin: 0;">{{ item.title }}</p>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const tagList = ref([]);
const nationalityList = ref([]);
onMounted(() => {
  loadDictOptions(tagList, 'tag');
  loadDictOptions(nationalityList, 'nationality');
});
const nationalityFormatter = (row, column, cellValue, index) => {
  if (!nationalityList.value) {
    return cellValue;
  }
  for (let item of nationalityList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const tagFormatter = (row, column, cellValue, index) => {
  if (!tagList.value || !cellValue) {
    return cellValue;
  }
  const tagsArray = cellValue.split('/');
  const formattedTags = tagsArray.map(tagValue => {
    for (let item of tagList.value) {
      if (item.value === tagValue) {
        return item.label;
      }
    }
    return tagValue;
  });
  return formattedTags.join('  ');
};

let filmId = new URLSearchParams(window.location.search).get('filmId');
const tableData = ref([]);
const search = () => {
  axios.get(BASE_URL + '/v1/film/select?id=' + filmId)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  search();
});
const watchMovie = () => {
  router.push('/watch?filmId=' + filmId)
}
const activeName = ref('first');
const actorData = ref([]);
const searchActor = () => {
  axios.get(BASE_URL + '/v1/filmActor/select/' + filmId)
      .then((response) => {
        if (response.data.code === 2000) {
          actorData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
onMounted(() => {
  searchActor();
})
const previewData = ref([]);
const selectPreview = () => {
  axios.get(BASE_URL + '/v1/preview/selectByFilmId/' + filmId)
      .then(response => {
        if (response.data.code === 2000) {
          previewData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
};
// 测试添加
onMounted(() => {
  selectPreview();
})
const lookPreview = (id, filmId) => {
  router.push('/watchPreview' + '?previewId=' + id + '&filmId=' + filmId)
}
</script>

<style scoped>
.movie {
  height: 260px;

  p {
    color: #FFFFFF;
  }
}

.btn {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 40px;
  background-color: #671523;
  border-radius: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: transparent;
}

.el-icon-video-play {
  font-size: 20px;
  margin-right: 5px;
  font-weight: bold;
}

.movie-details {
  margin-top: 10px;

  p {
    color: #FFFFFF;
  }
}

</style>
<style>
.el-tabs__item {
  color: #FFFFFF;
}
</style>